<template>
  <GlobalPage>
    <div class="table-box">
      <el-table :data="Data.list" style="width: 100%; font-size: 10px">
        <el-table-column type="selection" width="35" align="center">
        </el-table-column>
        <el-table-column prop="id" label="ID" width="45" align="center" />
        <el-table-column prop="title" label="标题" width="120" />
        <el-table-column prop="name" label="标识">
          <template #default="{ row }">
            <el-link style="font-size: 10px" type="primary">{{
              row.name
            }}</el-link>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="词条" width="65" align="center">
          <template #default="{ row }">
            <el-link
              style="font-size: 10px"
              type="primary"
              @click="clickLook(row)"
              >{{ row.count + "个词条" }}</el-link
            >
          </template>
        </el-table-column>
        <el-table-column
          prop="create_date"
          label="创建时间"
          width="120"
          align="center"
        />
        <el-table-column prop="state" label="状态" width="65" align="center">
          <template #default="{ row }">
            <el-switch
              v-model="row.state"
              inline-prompt
              :active-value="1"
              active-text="正常"
              inactive-text="停用"
              :inactive-value="0"
              @change="changeState(row, index)"
            />
          </template>
        </el-table-column>
        <el-table-column width="50" fixed="right" label="操作" align="center">
          <template #default="{ row, $index: index }">
            <el-dropdown>
              <el-button :icon="MoreFilled" circle />
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item @click="clickLook(row)"
                    >查看</el-dropdown-item
                  >
                  <el-dropdown-item>新增词条</el-dropdown-item>
                  <el-dropdown-item @click="clickEmptyValues(row)"
                    >清空词条</el-dropdown-item
                  >
                  <el-dropdown-item>删除</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>

      <GlobalPagination
        :total="Data.total"
        @paginationChange="paginationChange"
      ></GlobalPagination>

      <el-dialog
        v-model="DistionaryDialog"
        :title="Data.dictionaryValueDialogTitle"
        width="800"
      >
        <div class="DistionaryDialog-header"></div>

        <div class="DistionaryDialog-table">
          <el-table
            :data="Data.dictionaryValueList"
            style="font-size: 10px; width: 100%"
          >
            <el-table-column type="selection" width="35" align="center">
            </el-table-column>
            <el-table-column prop="id" label="ID" width="45" align="center" />
            <el-table-column prop="label" label="词条" align="center" />
            <el-table-column prop="value" label="Value" align="center">
              <template #default="{ row }">
                <el-link type="primary" style="font-size: 10px">{{
                  row.value
                }}</el-link>
              </template>
            </el-table-column>
            <el-table-column
              prop="create_date"
              label="创建时间"
              width="120"
              align="center"
            />
            <el-table-column prop="state" label="更新" width="60" />
            <el-table-column prop="state" label="删除" width="60" />
            <el-table-column prop="comment" label="备注" width="60" />
            <el-table-column
              prop="state"
              label="状态"
              width="60"
              align="center"
            >
              <template #default="{ row }">
                <el-switch
                  v-model="row.state"
                  inline-prompt
                  :active-value="1"
                  active-text="正常"
                  inactive-text="停用"
                  :inactive-value="0"
                  @change="changeState(row, index)"
                />
              </template>
            </el-table-column>
            <el-table-column
              width="50"
              fixed="right"
              label="操作"
              align="center"
            >
              <template #default="{ row, $index: index }">
                <el-dropdown>
                  <el-button :icon="MoreFilled" circle />
                  <template #dropdown>
                    <el-dropdown-menu>
                      <el-dropdown-item>修改</el-dropdown-item>
                      <el-dropdown-item>删除</el-dropdown-item>
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
              </template>
            </el-table-column>
          </el-table>
          <GlobalPagination
            :total="Data.total"
            @paginationChange="paginationChange"
          ></GlobalPagination>
        </div>
        <div class="DistionaryDialog-footer"></div>

        <template #footer> </template>
      </el-dialog>
    </div>
  </GlobalPage>
</template>

<script setup>
import API from "@/api";
import { reactive, onBeforeMount, ref, watch } from "vue";
import GlobalPage from "@/components/Global-Page/Global-Page.vue";
import GlobalPagination from "@/components/GlobalPagination/index.vue";
import { MoreFilled, View, Edit } from "@element-plus/icons-vue";
const DistionaryDialog = ref(false);
import { ElMessageBox } from "element-plus";
const Data = reactive({
  total: 0,
  pages: 0,
  page: 1,
  limit: 10,
  list: [],
  currentDistionary: {},
  dictionaryValueList: [],
  dictionaryValueDialogTitle: "",
});
watch(DistionaryDialog, () => {
  Data.dictionaryValueList = [];
});
onBeforeMount(() => {
  GetDistionaryList();
});
function GetDistionaryList() {
  API.Dictionary.dictionaryList({}).then((res) => {
    let { data } = res;
    Data.list = data;
  });
}
function showDistionaryDialog(mode = "look", row) {
  if (mode == "look") {
    Data.currentDistionary = row;
  } else if (mode == "add") {
  } else if (mode == "edit") {
  }
  DistionaryDialog.value = true;
}
// 点击查看字典
function clickLook(row) {
  let { id, title } = row;
  Data.dictionaryValueDialogTitle = title;
  showDistionaryDialog("look", row);
  API.Dictionary.dictionaryValueList({ id })
    .then((res) => {
      let { data } = res;
      let { list } = data;
      Data.dictionaryValueList = list;
    })
    .catch((err) => {
      console.log(err);
    });
}

// 点击删除字典
function clickDelete(row) {
  showDistionaryDialog("add", row);
}
// 点击新增字典
function clickAdd(row) {
  showDistionaryDialog("add", row);
}
// 点击清空词条内容
function clickEmptyValues(row) {
  let { title, count } = row;
  ElMessageBox.confirm(`是否需要清空‘${title}’ ${count} 个词条`)
    .then(() => {
      return API.Dictionary.EmptyDictionaryValue();
    })
    .then((res) => {
      console.log(res);
    })
    .catch(() => {
      // catch error
    });
}
</script>

<style scoped>
.table-option {
  justify-content: space-between;
}

.table-search {
  width: 300px;
  height: 35px;
  border-radius: 20px;
  border: 1px solid #c3c3c3;
}

.dictionary-add-value {
  height: 100px;
  display: flex;
  align-items: center;
}
</style>
